import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, update, add, remove } from "@/api/teacher";
import { genderOptions } from "@/const";

import {
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-form";

export default () => {
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "性别",
      dataIndex: "gender",
      width: 150,
      valueType: "select",
      search: false,
      fieldProps: {
        options: genderOptions,
      },
    },
    {
      title: "手机号",
      dataIndex: "mobile",
      width: 150,
      search: false,
    },
    {
      title: "紧急联系人电话",
      dataIndex: "emergencyMobile",
      width: 150,
      search: false,
    },
  ];
  const renderFormItem = () => {
    return (
      <>
        <ProFormText
          width="lg"
          label="姓名"
          name="name"
          rules={[
            { required: true, message: "请输入姓名" },
            {
              max: 20,
              message: "最长为20位",
            },
          ]}
        />
        <ProFormRadio.Group
          width="lg"
          label="性别"
          name="gender"
          options={genderOptions}
          rules={[{ required: true, message: "请选择宝宝性别" }]}
        />
        <ProFormText
          width="lg"
          label="手机号码"
          name="mobile"
          placeholder="请输入手机号码"
          rules={[
            {
              required: true,
              message: "请输入手机号码",
            },
            {
              pattern:
                /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
              message: "手机号码格式错误",
            },
          ]}
        />
        <ProFormText
          width="lg"
          label="紧急联系人电话"
          name="emergencyMobile"
          placeholder="请输入手机号码"
          rules={[
            {
              required: true,
              message: "请输入手机号码",
            },
            {
              pattern:
                /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
              message: "手机号码格式错误",
            },
          ]}
        />

        <ProFormTextArea
          width="lg"
          fieldProps={{
            rows: 5,
          }}
          name="remark"
          label="备注"
          placeholder="请输入备注"
        />
      </>
    );
  };
  return (
    <PageContainer>
      {useCommonTable({
        title: "老师",
        renderFormItem,
        columns,
        modalWidth: 600,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
